<script setup>
import { ref } from 'vue';
const activeName = ref('0');
const tabList = ref([{
   title: '全部',
   name: '0',
   content: [
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '武侠', state: 1, words: '135万字' },
      { imgUrl: 'bg.jpg', title: '大王饶命', author: '会说话的肘子', tag: '玄幻', state: 0, words: '1135万字' },
      { imgUrl: 'bg.jpg', title: '第一序列', author: '会说话的肘子', tag: '末世', state: 1, words: '105万字' },
      { imgUrl: 'bg.jpg', title: '盘龙', author: '辰东', tag: '玄幻', state: 0, words: '1325万字' },
      { imgUrl: 'bg.jpg', title: '吞噬星空', author: '我吃西红柿', tag: '科技', state: 0, words: '1655万字' },
      { imgUrl: 'bg.jpg', title: '神墓', author: '辰东', tag: '末世', state: 0, words: '1065万字' },
      { imgUrl: 'bg.jpg', title: '完美世界', author: '辰东', tag: '末世', state: 0, words: '995万字' }
   ]
}, {
   title: '都市',
   name: '1',
   content: [
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '85万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '60万字' }
   ]
}, {
   title: '历史',
   name: '2',
   content: [
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' }
   ]
}, {
   title: '科幻',
   name: '3',
   content: [
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' },
      { imgUrl: 'bg.jpg', title: '剑来', author: '烽火戏诸侯', tag: '影视', state: 1, words: '40万字' }
   ]
},
]);
</script>

<template>
   <div>
      <van-tabs v-model:active="activeName">
         <van-tab v-for="(v,i) in tabList" :key="i" :title="v.title" :name="v.name">
            <div class="chartstab-content">
               <div class="chartstab-item">
                  <div class="chartstab-list" v-for="(item,j) in v.content" :key="j">
                     <div class="chartstab-img">
                        <img :src="`/src/assets/images/${item.imgUrl}`" :alt="item.title">
                     </div>
                     <div class="chartsta-title">
                        <h4>{{item.title}}</h4>
                        <p>{{item.author}}</p>
                        <p>{{item.tag}} {{item.state == 1? '连载中' : '已完结'}}·{{item.words}}</p>
                     </div>
                  </div>
               </div>
            </div>
         </van-tab>
      </van-tabs>
   </div>
</template>

<style scoped>
</style>